<!DOCTYPE html>
<html>
<head>
	
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>Time Off Machine</title>
	<link rel="icon" type="image/gif" href="/assets/img/favicon.gif">
	<link rel="icon" sizes="196x196" href="/assets/img/casey-icon-196.png">
	<link rel="icon" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<link rel="apple-touch-icon" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<link rel="apple-touch-icon-precomposed" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<!-- style sheets -->
	<link href='//fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="assets/css/timeoff-proto-primary.css?v=5" type="text/css" media="screen" charset="utf-8"> <!-- old stylesheet -->
	
</head>
<body>

<div id="app-wrapper">
	
	<!-- FLOATING ACTION BUTTON -->
	<div class="action-button-container-v2">
		<a class="button round-button" title="Add new time off"  href="new-timeoff.html" tabindex="1">
			<div class="plus-icon"></div>
			<div class="create-icon"></div>
		</a>
	</div>
	
	<!-- LEFT SIDE CONTENT SECTION -->
	<div id="left-panel" class="">
		
		<div id="profile">
			<div id="circle">
				<img src="https://teams-service.googleplex.com/photos/">
			</div>
			<div id="ldap">yourname@google.com</div>
		</div>
		
		<nav class="">
		
			<!-- top navigation -->
			<ul class="primary-sitenav">
				<li>
					<a href="home.html" class="selected" title="Your time off">
						<span class="icon icon-time-off"></span>
						<span class="list-description">Your time off</span>
					</a>
				</li>
				<li>
					<a href="holidays.html" class="" title="Google holidays">
						<span class="icon icon-calendar"></span>
						<span class="list-description">Google holidays</span>
					</a>
				</li>
				<li>
					<a href="https://goto.google.com/vacationpolicy" target="_blank" class="" title="Vacation policy">
						<span class="icon icon-policy"></span>
						<span class="list-description">Vacation policy</span>
					</a>
				</li>
	
			</ul>
			
			<!-- bottom navigation -->			
			<ul class="secondary-sitenav">
				<li>
					<a href="" class="" title="How to use this app">
						<span class="icon icon-help"></span>
						<span class="list-description">Get help</span>
					</a>
				</li>
				<li>
					<a href="" class="" title="Give feedback on this app">
						<span class="icon icon-feedback"></span>
						<span class="list-description">Give feedback</span>
					</a>
				</li>
			</ul>
			
			<!-- site version indicator -->
			<a class="version-indicator" href="index.html" title="Learn more about this version of the Time Off Machine">
				<span class="icon icon-dogfood"></span>
				<span class="list-description">BARK! CSS Prototype</span>
			</a>
			
		</nav>
		
	</div><!-- end side navigation -->
	
	
	<!-- MAIN CONTENT SECTION -->
	<div id="main-panel">
	
		<!-- FIXED TOP BAR -->
		<div id="app-bar" class="app-bar app-bar-centered">
			
			
				<!-- APP BAR BUTTONS -->
				<div class="app-bar-content left">
					<a id="button-menu" class="button button-appbar-icon button-menu mobile-only" title="Open navigation menu" href=""></a>
				</div>
				<div class="column-main">
					<div class="app-bar-content left">
						<h1 class="app-bar-title">Time Off Machine</h1>
					</div>
				</div>
		</div> <!-- end APPBAR container -->


		<!-- MAIN CONTENT SUB-SECTIONS -->
		<div class="column-main" role="main">
				
			<ul class="page-sections variable-topmargin">
				
				<div class="error-header-container">
					<!-- ERROR WARNING -->
					<li class="page-section-item error-header error-header-warning">
						
						<!-- ERROR WARNING MESSAGE (Can add multiples of these)-->
						<div class="error-header-message">This tool is in early development, meaning it doesn't use real data yet. To file actual time off, please <a href="">visit Workday</a>.</div>
						
						<a class="button button-appbar-icon button-close-white error-header-dismiss delete-parent"></a>
					</li>
					
					<!-- ERROR -->
					<li class="page-section-item error-header">
						
						<!-- ERROR MESSAGE (Can add multiples of these)-->
						<div class="error-header-message">The server isn't responding. Please reload the page.</div>
						<div class="error-header-message">Something else went totally wrong. OMG.</div>
						
						<a class="button button-appbar-icon button-close-white error-header-dismiss delete-parent"></a>
					</li>
				</div>
				
				<!-- VACATION BALANCE CARD -->
				<li class="page-section-item">
					
						<a class="card card-vacation-balance listitem" href="new-timeoff.html" title="Book new time off">
							<span class="balance-casey left">
								<img src="assets/img/casey-icon-196.png" alt="Casey Case'm" width="98px" height="98px">
							</span>
							<span class="balance-description">
								<h2 class="font-xlarge">22 days, 7 hours</h2>
								<div class="secondary">Vacation balance as of today</div>
							</span>
						</a>
						<div class="vacation-balance-info">
							<a href="" class="button button-icon button-info" title="Learn more about our vacation policy"></a>
						</div>
					
				</li>
							
				<!-- TIME OFF LIST 'UPCOMING' -->
				<li class="page-section-item">
				
					<h4 class="listheader">Upcoming time off</h4>
					
					<!-- TIME OFF LIST CARD -->
					<div class="list card">
									
						<!-- TIME OFF LISTITEM -->
						<a class="listitem listitem-pending" href="">
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-pending" title="Status: Pending">
									<div class="pending-dot pending-dot-1"></div>
									<div class="pending-dot pending-dot-2"></div>
									<div class="pending-dot pending-dot-3"></div>
								</div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" title="Vacation">Processing...<span class="secondary"></span></div>
								<div class="listitem-desc-secondary">Vacation: Mon, Jul 22 - Fri, Jul 27, 2014</div>
								<div class="listitem-desc-tertiary"></div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem listitem-error" href="new-timeoff.html">
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-error" title="Status: Approved"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" title="Sick leave">Please re-enter. Something went wrong!<span class="secondary"></span></div>
								<div class="listitem-desc-secondary">Sick Leave: Fri, Jul 19, 2014</div>
								<div class="listitem-desc-tertiary"></div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" href="edit-timeoff.html">
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-jury" title="Status: Approved"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" title="Jury duty">Jury duty</div>
								<div class="listitem-desc-secondary">Mon, Aug 22, 2014</div>
								<div class="listitem-desc-tertiary">1 day</div>
							</span>
						</a>
						
						
					</div> <!-- end list card -->
						
				</li> <!-- end page section item -->
				
				
				<!-- TIME OFF LIST 'HISTORY' -->
				<li class="page-section-item">
				
					<h4 class="listheader">Past 12 months</h4>
					
					<!-- TIME OFF LIST CARD -->
					<div class="list card">
									
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" href="old-timeoff.html">
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-vacation taken" title="Status: Taken"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" title="Vacation">Vacation</div>
								<div class="listitem-desc-secondary">Mon, Dec 28 - Fri, Jan 03, 2013</div>
								<div class="listitem-desc-tertiary">3 days</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" href="old-timeoff.html">
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-baby taken" title="Status: Taken"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" title="Adoption Leave - Primary Caregiver First 2 Weeks">Adoption leave - primary caregiver first 2 weeks
</div>
								<div class="listitem-desc-secondary">Wed, Sep 18, 2013</div>
								<div class="listitem-desc-tertiary">1 day</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" href="old-timeoff.html">
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-family taken" title="Status: Taken"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" title="Family emergency">Family emergency</div>
								<div class="listitem-desc-secondary">Thu, Aug 23, 2013</div>
								<div class="listitem-desc-tertiary">1 day</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" href="old-timeoff.html">
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-education taken" title="Status: Taken"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" title="Study leave">Study leave</div>
								<div class="listitem-desc-secondary">Thu, Dec 19 - Fri, Dec 20, 2012</div>
								<div class="listitem-desc-tertiary">2 days</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" href="old-timeoff.html">
						
							<span class="listitem-icon-container">
								<div class="time-type-icon taken" title="Status: Taken"></div>
								<div class="time-type-firstletter">M</div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" title="Monkshood leave">Monkshood leave</div>
								<div class="listitem-desc-secondary">Wed, Aug 19, 2012</div>
								<div class="listitem-desc-tertiary">1 day</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" href="old-timeoff.html" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon taken" title="Status: Taken"></div>
								<div class="time-type-firstletter">U</div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" title="Unpaid time off">Unpaid time off</div>
								<div class="listitem-desc-secondary">Wed, Aug 19 - Fri, Aug 21, 2012</div>
								<div class="listitem-desc-tertiary">3 days</div>
							</span>
						</a>
						
												
					</div> <!-- end list card -->
						
				</li> <!-- end page section item -->
				
			</ul> <!-- end page sections -->
			
			<!-- TOASTS AND BOTTOM ALERTS -->
			<div class="toast-container">
				<div class="toast">
					<span class="toast-description">This is a very very long message that we want to tell the user so that they know something important just happened.</span>
					<a href="#" class="button button-appbar-icon button-close-white toast-dismiss delete-parent"></a>
				</div>
			</div>
		
		</div><!-- end column main -->

		
	</div> <!-- end 'primary content' section -->
	
	<!-- NAV DRAWER BACKGROUND -->
	<div id="navdrawer-bg" class="composited-layer navdrawer-bg-event"></div>
	
</div><!-- end app wrapper -->

<!-- JAVASCRIPT -->
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/js/menu-slider.js" type="text/javascript"></script>
<script src="assets/js/delete-parent.js" type="text/javascript"></script>

</body>
</html>